import * as echarts from 'echarts';
import { EChartOption, EChartOptionBuilder } from '../../hooks/utilChart';

export function lineChart(data: any) {
   data.series.forEach((item: any) => {
      item.itemStyle.normal.areaStyle = {
         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
               offset: 0,
               color: 'rgba(7,44,90,0.3)',
            },
            {
               offset: 1,
               color: 'rgba(114,144,89,0.9)',
            },
         ]),
      };
   });
   const option = new EChartOptionBuilder()
      .setBackgroundColor(data.backgroundColor)
      .setTitle(data.title)
      .setTitle(data.title)
      .setTooltip(data.tooltip)
      .setGrid(data.grid)
      .setLegend(data.legend)
      .setXAxis(data.xAxis)
      .setYAxis(data.yAxis)
      .addSeries(data.series)
      .build();
   return option;
}

export function ganttChart(data: any) {
   data.yAxis.axisLabel.formatter = function (value: any) {
      var last = '';
      var max = 5;
      var len = value.length;
      var hang = Math.ceil(len / max);
      if (hang > 1) {
         for (var i = 0; i < hang; i++) {
            var start = i * max;
            var end = start + max;
            var temp = value.substring(start, end) + '\n';
            last += temp; //凭借最终的字符串
         }
         return last;
      } else {
         return value;
      }
   };
   data.tooltip.formatter = function (params: any) {
      var res = '';
      var name = '';
      var start = '';
      var end = '';
      for (var i in params) {
         var k = +i % 2;
         if (!k) {
            //偶数
            start = params[i].data;
         }
         if (k) {
            //奇数
            name = params[i].seriesName;
            end = params[i].data;
            res += name + ' : ' + start + '~' + end + '</br>';
         }
      }
      return res;
   };
   const option = new EChartOptionBuilder()
      .setBackgroundColor(data.backgroundColor)
      .setTitle(data.title)
      .setTooltip(data.tooltip)
      .setGrid(data.grid)
      .setLegend(data.legend)
      .setXAxis(data.xAxis)
      .setYAxis(data.yAxis)
      .addSeries(data.series)
      .build();
   return option;
}

export function pieChart(data: any) {
   const rich = {
      yellow: {
         color: '#ffc72b',
         fontSize: 30,
         padding: [5, 4],
         align: 'center',
      },
      total: {
         color: '#ffc72b',
         fontSize: 40,
         align: 'center',
      },
      white: {
         color: '#fff',
         align: 'center',
         fontSize: 14,
         padding: [21, 0],
      },
      blue: {
         color: '#49dff0',
         fontSize: 16,
         align: 'center',
      },
      hr: {
         borderColor: '#0b5263',
         width: '100%',
         borderWidth: 1,
         height: 0,
      },
   };
   data.legend.formatter = function (name: any) {
      var total = 0; //各科正确率总和
      data.series[0].data.forEach(function (value: any) {
         total += value.value;
      });
      return '{total|' + total + '}';
   };
   data.legend.textStyle.rich = rich;
   data.series[0].label.normal.formatter = function (params: any) {
      var total = 0; //考生总数量
      var percent = 0; //考生占比
      data.series[0].data.forEach(function (value: any) {
         total += value.value;
      });
      percent = +((params.value / total) * 100).toFixed(1);
      return (
         '{white|' +
         params.name +
         '}\n{hr|}\n{yellow|' +
         params.value +
         '}\n{blue|' +
         percent +
         '%}'
      );
   };
   const option = new EChartOptionBuilder()
      .setBackgroundColor(data.backgroundColor)
      .setTitle(data.title)
      .setLegend(data.legend)
      .addSeries(data.series)
      .build();
   return option;
}
